<%@ page contentType="text/html;charset=UTF-8" language="java" session="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style>
.node {
	stroke: #fff;
	stroke-width: 1.5px;
}

.link {
	stroke: #999;
	stroke-opacity: .6;
}
</style>

<script type="text/javascript" src="resources/scripts/jquery-1.8.2.min.js"></script>
<script src="resources/scripts/d3.v3.min.js"></script>

<html>

<head>
<title>Home</title>
</head>
<body>
<div>
   
   	<div id="big-search-wrap">
        <script>
     function clfun(){
    	
    	 $.ajax({
    			type : 'POST',
    			url : 'college/populate',
    			dataType : 'json',
    			async : true,
    			success : function(result) {
    				//alert(result);
    				//render();
    			},
    			error : function(jqXHR, textStatus, errorThrown) {
    				alert(jqXHR.status + ' ' + jqXHR.responseText);
    			}
    		});
     }
     
    
    </script>
    
    <button type='button' onclick='clfun()'>Save</button>
    
     <script>
     var height = window.innerHeight;
     var width = window.innerWidth;

     var color = d3.scale.category20();

     var radius = d3.scale.sqrt()
         .range([0, 6]);

     var svg = d3.select("body").append("svg")
         .attr("width", width)
         .attr("height", height);

     var force = d3.layout.force()
         .size([width, height])
         .charge(-600)
         .linkDistance(function(d) { return 150; });
     function clfun1(){
    	
    	 $.ajax({
    			type : 'GET',
    			url : 'college/get',
    			dataType : 'json',
    			async : true,
    			success : function(graph) {
    				  force
    			      .nodes(graph.nodes)
    			      .links(graph.links)
    			      .on("tick", tick)
    			      .start();

    			  var link = svg.selectAll(".link")
    			      .data(graph.links)
    			    .enter().append("g")
    			      .attr("class", "link");

    			  link.append("line")
    			      .style("stroke-width", function(d) { return  2 + "px"; });

    			  link.filter(function(d) { return false; }).append("line")
    			      .attr("class", "separator");

    			  var node = svg.selectAll(".node")
    			      .data(graph.nodes)
    			    .enter().append("g")
    			      .attr("class", "node")
    			      .call(force.drag);

    			  node.append("circle")
    			      .attr("r", function(d) { return radius(20); })
    			      .style("fill", function(d) { return color(d.nodetype); });

    			  node.append("text")
    			      .attr("dy", ".35em")
    			      .attr("text-anchor", "middle")
    			      .text(function(d) { return d.name; });

    			  function tick() {
    			    link.selectAll("line")
    			        .attr("x1", function(d) { return d.source.x; })
    			        .attr("y1", function(d) { return d.source.y; })
    			        .attr("x2", function(d) { return d.target.x; })
    			        .attr("y2", function(d) { return d.target.y; });

    			    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    			  }
    			},
    			error : function(jqXHR, textStatus, errorThrown) {
    				alert(jqXHR.status + ' ' + jqXHR.responseText);
    			}
    		});
     }
     
    
    </script>
     <button type='button' onclick='clfun1()'>Get</button>
    
     
    <div id='cy'></div>
    </div>
</div>
</body>
</html>